<!DOCTYPE html>
<html>
<head>
  <script src="../../processing.js"></script>
<link rel="stylesheet" href="../style.css"/></head>
<body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1>
<h2>Recursion</h2>

<p>A demonstration of recursion, which means functions call themselves. 
Notice how the drawCircle() function calls itself at the end of its block. 
It continues to do this until the variable "level" is equal to 1.</p>

<p><a href="http://processing.org/learning/basics/recursion.html"><b>Original Processing.org Example:</b> Recursion</a><br>
<script type="application/processing">
void setup() 
{
  size(200, 200);
  noStroke();
  smooth();
  noLoop();
}

void draw() 
{
  drawCircle(126, 170, 6);
}

void drawCircle(int x, int radius, int level) 
{                    
  float tt = 126 * level/4.0;
  fill(tt);
  ellipse(x, 100, radius*2, radius*2);      
  if(level > 1) {
    level = level - 1;
    drawCircle(x - radius/2, radius/2, level);
    drawCircle(x + radius/2, radius/2, level);
  }
}
</script><canvas width="200" height="200"></canvas></p>
<div style="height:0px;width:0px;overflow:hidden;"></div>

<pre><b>// All Examples Written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a>
// unless otherwise stated.</b>
void setup() 
{
  size(200, 200);
  noStroke();
  smooth();
  noLoop();
}

void draw() 
{
  drawCircle(126, 170, 6);
}

void drawCircle(int x, int radius, int level) 
{                    
  float tt = 126 * level/4.0;
  fill(tt);
  ellipse(x, 100, radius*2, radius*2);      
  if(level &gt; 1) {
    level = level - 1;
    drawCircle(x - radius/2, radius/2, level);
    drawCircle(x + radius/2, radius/2, level);
  }
}</pre>
</body>
</html>
